<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleOk"
    cancelText="关闭"
    class="pop-table"
    :closable="false">

    <a-spin :spinning="confirmLoading">
      <div class="card-container">
        <div class="box">
          <a-row>
            <a-col :span="24" title="线索标题">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="线索标题">
                {{ recordLocal.cluesTitle || recordLocal.cluesName }}
              </a-form-item>
            </a-col>
            <a-col :span="24" v-if="recordLocal.cluesSubTitle != null " >
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="线索副标题">
                {{ recordLocal.cluesSubTitle }}
              </a-form-item>
            </a-col>
            <a-col :span="24" title="线索来源" v-if="recordLocal.cluesSource == 1 || recordLocal.cluesSource == 2 || recordLocal.cluesSource == 3">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="线索来源">
                <span v-if="recordLocal.cluesSource == 1">爬虫</span>
                <span v-if="recordLocal.cluesSource == 2">用户爆料</span>
                <span v-if="recordLocal.cluesSource == 3">内部发起</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="爬虫来源" v-if="recordLocal.crawlerSource == 0 || recordLocal.crawlerSource == 1 || recordLocal.crawlerSource == 2 || recordLocal.crawlerSource == 3 || recordLocal.crawlerSource == 4 || recordLocal.crawlerSource == 5">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="爬虫来源">
                <span v-if="recordLocal.crawlerSource == 0">新华网</span>
                <span v-if="recordLocal.crawlerSource == 1">学习强国</span>
                <span v-if="recordLocal.crawlerSource == 2">中国日报</span>
                <span v-if="recordLocal.crawlerSource == 3">央视网</span>
                <span v-if="recordLocal.crawlerSource == 4">央广网</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="关键词" v-if="recordLocal.keyword !=null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="关键词">
                <span >{{ recordLocal.keyword }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="备注" v-if="recordLocal.remark != null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="备注">
                <span >{{ recordLocal.remark }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="转发量" v-if="recordLocal.forwardNum != null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="转发量">
                <span >{{ recordLocal.forwardNum }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="阅读量" v-if="recordLocal.readNum != null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="阅读量">
                <span >{{ recordLocal.readNum }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="评论量" v-if="recordLocal.remarkNum !=null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="评论量">
                <span >{{ recordLocal.remarkNum }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="新闻发布时间" v-if="recordLocal.releaseTime !=null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="新闻发布时间">
                <span >{{ recordLocal.releaseTime }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="爬取/创建时间">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="爬取/创建时间">
                <span >{{ recordLocal.createTime }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="爆料人" v-if="recordLocal.userName != null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="爆料人">
                <span >{{ recordLocal.userName }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="链接地址" v-if="recordLocal.crawlerUrl != null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="链接地址">
                <span ><a :href="recordLocal.crawlerUrl" target="_blank">点击跳转</a></span>
              </a-form-item>
            </a-col>
            <a-col :span="24" title="图片" v-if="recordLocal.imgUrl1 != null">
              <a-form-item
                :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
                :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
                label="图片">
                <div class="imgList">
                  <div>
                    <img v-if="recordLocal.imgUrl1" :src="recordLocal.imgUrl1"/>
                    <img v-if="recordLocal.imgUrl2" :src="recordLocal.imgUrl2"/>
                    <img v-if="recordLocal.imgUrl3" :src="recordLocal.imgUrl3"/>
                  </div>
                  <div>
                    <img v-if="recordLocal.imgUrl4" :src="recordLocal.imgUrl4"/>
                    <img v-if="recordLocal.imgUrl5" :src="recordLocal.imgUrl5"/>
                    <img v-if="recordLocal.imgUrl6" :src="recordLocal.imgUrl6"/>
                  </div>
                </div>
              </a-form-item>
            </a-col>
          </a-row>

          <!-- <a-card :bordered="false">
            <detail-list >
              <detail-list-item term="线索标题">{{recordLocal.cluesTitle}}</detail-list-item>
              <detail-list-item term="线索副标题" v-if="recordLocal.cluesSubTitle != null ">{{recordLocal.cluesSubTitle}}</detail-list-item>
              <detail-list-item term="线索来源" v-if="recordLocal.cluesSource == 1">爬虫</detail-list-item>
              <detail-list-item term="线索来源" v-if="recordLocal.cluesSource == 2">用户爆料</detail-list-item>
              <detail-list-item term="线索来源" v-if="recordLocal.cluesSource == 3">内部发起</detail-list-item>

              <detail-list-item term="爬虫来源" v-if="recordLocal.crawlerSource == 0">今日头条</detail-list-item>
              <detail-list-item term="爬虫来源" v-if="recordLocal.crawlerSource == 1">学习强国</detail-list-item>
              <detail-list-item term="爬虫来源" v-if="recordLocal.crawlerSource == 2">微信公众号搜索</detail-list-item>
              <detail-list-item term="爬虫来源" v-if="recordLocal.crawlerSource == 3">微博搜索</detail-list-item>
              <detail-list-item term="爬虫来源" v-if="recordLocal.crawlerSource == 4">新华网</detail-list-item>
              <detail-list-item term="爬虫来源" v-if="recordLocal.crawlerSource == 5">百度</detail-list-item>

              <detail-list-item term="关键词" v-if="recordLocal.keyword !=null">{{recordLocal.keyword}}</detail-list-item>
              <detail-list-item term="备注" v-if="recordLocal.remark != null">{{recordLocal.remark}}</detail-list-item>
              <detail-list-item term="转发量" v-if="recordLocal.forwardNum != null">{{recordLocal.forwardNum}}</detail-list-item>
              <detail-list-item term="阅读量" v-if="recordLocal.readNum != null">{{recordLocal.readNum}}</detail-list-item>
              <detail-list-item term="评论量" v-if="recordLocal.remarkNum !=null">{{recordLocal.remarkNum}}</detail-list-item>
              <detail-list-item term="新闻发布时间" v-if="recordLocal.releaseTime !=null">{{recordLocal.releaseTime}}</detail-list-item>
              <detail-list-item term="爬取/创建时间">{{recordLocal.createTime}}</detail-list-item>
              <detail-list-item term="爆料人" v-if="recordLocal.userName != null">{{recordLocal.userName}}</detail-list-item>
              <detail-list-item term="链接地址" v-if="recordLocal.crawlerUrl != null"><a :href="recordLocal.crawlerUrl" target="_blank">点击跳转</a></detail-list-item>

            </detail-list>
          </a-card> -->
        </div>
      </div>
    </a-spin>

  </a-modal>
</template>

<script>
import { putAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item

export default {
    name: 'ClueDetail',
    components: {
        DetailList,
        DetailListItem
    },
    data () {
        return {
            title: '操作',
            visible: false,
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            recordLocal: {},
            confirmLoading: false,
            form: this.$form.createForm(this),
            validatorRules: {
            },
            url: {

            }

        }
    },
    created () {
    },
    methods: {
        detail (record) {
            var that = this
            that.recordLocal = record
            this.visible = true
        },
        close () {
            this.$emit('close')
            this.visible = false
        },
        handleOk () {
            this.close()
        },
        handleCancel () {
            this.close()
        }
    }
}
</script>

<style scoped>
/* .imgList {
  display: flex;
  flex-wrap: wrap;
} */
.imgList ul li{
  list-style: none;
}
.imgList  img{
  margin-right: 20px;
  margin-block-end: 20px;
  height: 150px;
  width: 150px;
  border-radius: 4px;
}
</style>
